<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <PageContent
      :list="list"
      :total-count="totalCount"
      :list-loading="listLoading"
      :page="pagination.page"
      v-bind="ContentConfig"
      @currentChange="currentChange"
      @SizeChange="SizeChange"
    >
      <template v-if="meta.indexOf('CoinsOrderListExport') > -1" #header>
        <el-button
          v-if="meta.indexOf('CoinsOrderListExport') > -1"
          type="primary"
          :loading="loadingExport"
          @click="exportClick"
        >
          {{ $t('message.daochu') }}
        </el-button>
      </template>
      <!-- 2.列中的插槽 -->
      <template #orderId="scope">
        <span class="primaryColor pointer" @click="rowOrderDetail(scope.row)">{{ scope.row.orderId }}</span>
      </template>
      <template #system="scope">
        <span v-if="scope.row.fromType === '01'">{{ $t('message.cgxcx') }}</span>
        <span v-if="scope.row.fromType === '02'">{{ $t('message.sbcs') }}</span>
      </template>
      <template #orderStatus="scope">
        <span>{{ scope.row.statusName }}</span>
      </template>
      <template #status="scope">
        <span>
          {{ scope.row.issendCoin == '0' ? $t('message.wcb') : $t('message.ycb') }}wcb
        </span>
      </template>
      <template #handler="scope">
        <div class="flex-cc">
          <el-button
            v-if="scope.row.payStatus === '0' && meta.indexOf('CoinsCancelOrder') > -1"
            class="secondColor"
            type="text"
            @click="rowCancel(scope.row)"
          >
            {{ $t('message.qx') }}
          </el-button>
          <el-button
            v-if="scope.row.issendCoin == '0' && scope.row.payStatus == '3' && meta.indexOf('CoinsSendCoins') > -1"
            type="text"
            @click="rowHander(scope.row)"
          >{{ $t('message.sdgb') }}</el-button>
        </div>
      </template>
    </PageContent>
    <OrderDetail ref="orderDetail" :info="orderInfo" />
  </div>
</template>

<script>
import QueryForm from '@/components/QueryForm'
import PageContent from './pagecContent'
import OrderDetail from './components/orderDetail.vue'

import { queryFormConfig, ContentConfig } from './orderList'
import {
  coinsOrderList,
  configList,
  coinsDevicesListPost,
  sendCoins,
  cancelOrder,
  orderListExport,
  getOrderTypeQuery
} from '@/api'
export default {
  components: {
    QueryForm,
    PageContent,
    OrderDetail
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filters: {},
      queryFormConfig,
      ContentConfig,
      list: [],
      loadLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      totalCount: 0,
      loadingExport: false,
      orderInfo: {}
    }
  },
  created() {
    this.handleQuery()
    this.getOrderStatusList()

    this.initOptions()
  },
  methods: {
    getOrderStatusList() {
      getOrderTypeQuery({ param: {}}).then(res => {
        this.queryFormConfig.formItems[5].options = res.recordList || []
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getList()
    },
    async getList() {
      const { pagination, filters } = this
      this.listLoading = true
      try {
        const res = await coinsOrderList({ pagination, param: filters })
        this.list = res.recordList
        this.totalCount = res.totalCount
      } catch (err) {
        console.log('error')
      } finally {
        this.listLoading = false
      }
    },
    initOptions() {
      configList({ param: { type: 2, code: 'PAY_CONFIG' }}).then(res => {
        const temp = res.recordList.map(i => {
          i.label = i.name
          return i
        })
        this.queryFormConfig.formItems[4].options = temp
      })
      coinsDevicesListPost({ param: {}}).then(res => {
        if (res.errorCode !== '000000') return
        const temp = res.recordList.map(i => {
          i.label = i.name
          i.value = i.id
          return i
        })
        this.queryFormConfig.formItems[2].options = temp
      })
    },
    exportClick() {
      const { pagination, filters } = this
      this.loadingExport = true
      orderListExport({ pagination, param: filters }).then(res => {
        this.loadingExport = false
        if (res.errorCode !== '000000') return
        const a = document.createElement('a') // 创建一个a标签元素
        a.style.display = 'none' // 设置元素不可见
        a.href = res.record.showUrl // 设置下载地址
        document.body.appendChild(a) // 加入
        a.click() // 触发点击,下载
        document.body.removeChild(a) //
        this.$message.success(this.$t('message.dccg'))
      }, () => {
        this.loadingExport = false
      })
    },
    rowOrderDetail(item) {
      if (this.meta.indexOf('CoinsOrderListDetial') === -1) {
        return this.$message.warning(this.$t('message.qxbz'))
      }
      this.$refs.orderDetail.getOrderDetail(item.orderId)
      this.$refs.orderDetail.isShow = true
    },
    currentChange(val) {
      this.pagination.page = val
      this.getList()
    },
    SizeChange(val) {
      this.pagination.rows = val
      this.getList()
    },
    rowCancel(item) {
      cancelOrder({ param: { orderId: item.orderId }}).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.$t('message.qxcg'))
        this.getList()
      })
    },
    rowHander(item) {
      sendCoins({ param: { orderId: item.orderId }}).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.$t('message.sdgb') + this.$t('message.success'))
        this.getList()
      })
    },
    handleModelEnter() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // this.isShowModal = false
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    }
  }
}
</script>

<style>
</style>
